<template>
  <div class="relativeperm">
    <el-button>调取记录</el-button>
    <el-button type="primary">保存为</el-button>
    <el-divider>曲线记录：{{ curve_name }}</el-divider>

    <el-input v-model="miuw" placeholder="地层水黏度 (mPa·s)" type="number" />
    <el-input v-model="miuo" placeholder="原油黏度 (mPa·s)" type="number" />
    <el-button type="success" @click="clicked">计算</el-button>
    <el-row style="min-height: 400px">
      <el-col :span="12">
        <editable-tab ref="hot" :settings="hotsettings" />
      </el-col>
      <el-col :span="12">
        <echarts-dom ref="echart" :option="echartsOpt" />
      </el-col>
    </el-row>
    <el-row v-if="showcurve" style="min-height: 100px">
      <echarts-dom ref="echart_wvr" :option="echartsOpt" />
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import EditableTab from "@/components/EditableTab.vue";
import EchartsDom from "../../components/EchartsDom.vue";
import { DataFrame } from "danfojs";
var curve_name = ref();
var miuw = ref();
var miuo = ref();
var hot = ref();
var echart = ref();
var echart_wvr = ref();
var echartsOpt = ref();
var showcurve = ref(false);
//app1.mount(domid);
var rowdata = null;
var colnames = ref(["Sw", "Krw", "Kro", "fw", "R", "Jo", "Jl"]);
var calc = ref();
calc.value = true;
rowdata = [new Array(7)];
onMounted(() => {
  echart.value.initdom();
  echart.value.plot();
  function plotRePerm() {
    new Promise((resolve, reject) => {
      let data = new DataFrame(hot.value.hott.hotInstance.getData(), {
        columns: colnames.value,
      }).loc({ columns: ["Sw", "Krw", "Kro"] });

      echartsOpt.value = {
        title: {
          text: "相渗曲线",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
          backgroundColor: "rgba(255, 255, 255, 0.6)",
        },
        legend: {
          // array
          //data: data,
        },
        xAxis: {
          axisTick: {
            alignWithLabel: true,
          },
          data: data["Sw"].values,
        },
        yAxis: { type: "value" },
        series: [
          /*
      {
        name: "sales",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
      */
        ],
      };
      const chartCol = {
        Kro: "red",
        Krw: "blue",
      };
      ["Kro", "Krw"].forEach((col) => {
        echartsOpt.value.series.push({
          type: "line",
          name: col,
          data: data.column(col).values,
          color: chartCol[col],
        });
      });
      resolve("1");
    }).then((res) => {
      console.log(res);
      echart.value.plot();
    });
  }
  hotsettings = {
    licenseKey: "non-commercial-and-evaluation",
    data: rowdata,
    colHeaders: colnames.value,
    rowHeaders: false,
    width: "auto",
    height: "auto",
    //minRows: 10,
    contextMenu: true,
    manualColumnFreeze: false,
    manualColumnMove: false,
    manualColumnResize: true,
    manualRowResize: true,
    manualRowMove: true,
    dropdownMenu: false,
    filters: false,
    columnSorting: false,
    comments: false,
    afterChange: plotRePerm,
  };
  hot.value.hott.hotInstance.updateSettings(hotsettings);
});

var hotsettings = null;

hotsettings = {
  licenseKey: "non-commercial-and-evaluation",
  data: rowdata,
  colHeaders: colnames.value,
  rowHeaders: false,
  width: "auto",
  height: "auto",
  maxRows: 20,
  contextMenu: true,
  manualColumnFreeze: false,
  manualColumnMove: false,
  manualColumnResize: true,
  manualRowResize: true,
  manualRowMove: true,
  dropdownMenu: false,
  filters: false,
  columnSorting: false,
  comments: false,
};
function checkdata() {
  return 1;
}

function calculate() {
  let data = new DataFrame(hot.value.hott.hotInstance.getData(), {
    columns: colnames.value,
    dtypes: ["float"] * 7,
  }).loc({ columns: ["Sw", "Krw", "Kro"] });
  let wvo = miuw.value / miuo.value;
  data.addColumn("fw", data["Kro"].div(data["Krw"]).mul(wvo).add(1).pow(-1), {
    inplace: true,
  });
  let mon = 1 - data["Sw"].min();
  data.addColumn("R", data["Sw"].sub(1).div(mon).add(1), {
    inplace: true,
  });
  data.addColumn("Jo", data["Kro"], { inplace: true });
  data.addColumn("Jl", data["Krw"].div(wvo).sub(data["Kro"].mul(-1)), {
    inplace: true,
    dtypes: "float",
  });
  hot.value.hott.hotInstance.loadData(data.values);
  data.print();
  showcurve.value = true;
  //hot.value.hott.hotInstance.updateSettings(hotsettings);
}
/*
  var fw = [];
  var R = [];
  var fvR = [];
  var Jo = [];
  var Jw = [];
  var wvo = miuw.value / miuo.value;
  data.forEach((element) => {
    if (element[1] == 0) {
      null;
    } else {
      fw.push((1 / (1 + (wvo * element[3]) / element[2])));
      R.push((1 - (1 - element[0]) / (1 - minsw)) * 100);
    }
  });*/

function clicked() {
  if (checkdata()) {
    calculate().then();
  } else {
    showcurve.value = false;
  }
}
</script>

<style scoped>
.el-input {
  width: 200px;
}
</style>
